<template>
  <div>
  <van-button @click="send">在线咨询</van-button>

  <van-dialog v-model="show" title="标题" show-cancel-button>
  <div>
  <ul>
  <li v-for="(i,index) in meslist" :key="index">{{i}}</li>
  </ul>
  </div>
  <div>
  <van-field v-model="mes"/><van-button @click="submit">发送</van-button>
  </div>
</van-dialog>

  </div>
</template>

<script>
import {v4 as uuid} from "uuid"
export default {
    data(){
        return{
            show:false,
            mes:'',
            meslist:[],
            id:''
        }
    },
    methods: {
        send(){
            this.show=true
            this.conn()
        },
        conn(){
            this.id = uuid()
            this.ws = new WebSocket("ws://localhost:5000/sockconn?id="+this.id)
            this.ws.onopen=()=>{
                this.ws.send(JSON.stringify({"send":"conn","mes":"conn"}))
            }
            this.ws.onmessage=(res)=>{
                console.log(res)
                var data = JSON.parse(res.data)
                this.meslist.push(data.meslist)
            }
        },
        submit(){
            var mm = this.id +"说:"+this.mes
            this.meslist.push(mm)
            this.ws.send(JSON.stringify({"send":"kefu","mes":mm}))
        }
    }
}
</script>

<style>

</style>